<template>
  <div id="prize">  

    <div  style="display:flex;align-items: center;">
        <el-page-header @back="goBack"   content='' ></el-page-header>
        <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
        <div style="line-height: 40px;font-weight:bold:">银蛋管理</div>
    </div> 

      <el-form ref="form"  label-width="80px">           
          <el-row>
      
            <el-col :span="24" style="text-align: right;margin-bottom:10px;display:flex;justify-content: flex-end;">
               <el-form ref="form"   label-width="70px">  
                  <el-form-item label="是否消耗" style="margin-bottom: 0px !important;margin-right:10px;">
                          <el-switch  
                                :active-value="is_nums.active" 
                                :inactive-value="is_nums.isactive" 
                                v-model="is_nums.isshow" 
                                @change="switchchange()"  
                                active-color="#F5CF49" 
                                inactive-color="#E5E5E5"
                                > 
                            </el-switch>
                    </el-form-item>
                    
                </el-form>
              
                <el-button class="custom_color_button" type="primary" @click="add_but()">新增奖品</el-button>
            </el-col>
          </el-row>
    </el-form>

   <!-- 渲染数据list -->
   <prize-list :datalist="datalist" @up_list_fun="list_fun"> </prize-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

     <!-- 新增奖品 -->
    <el-dialog title="新增奖品" :visible.sync="add_mtk"  width="500px">
        <div style="width:100%;"> 

           <el-form ref="form"   label-width="70px" style="width:100%;">
            
          
            <el-form-item label="名称">
                    <el-input    v-model="add_form.name" placeholder="名称"></el-input>
            </el-form-item> 
            <el-form-item label="价格">
                    <el-input    v-model="add_form.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item label="选择方式">
                  <el-select  v-model="add_form.select_num"  placeholder="选择方式" style="width:100%;">
                      <el-option  v-for="(item,index) in add_form.select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="特别奖品">
                  <el-select  v-model="add_form.special_num"  placeholder="选择方式" style="width:100%;">
                      <el-option  v-for="(item,index) in add_form.special_data" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
            </el-form-item>

            </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="qr_add_but()">确认</el-button>
            </div>

        </div> 
    </el-dialog>


    

      
  </div>
</template>

<script>
import PrizeList from '@/view/Activitynew/Egg/PrizeList'
export default {
  name: 'prize',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        add_mtk:false,
        add_form:{
           name:'',
           price:'',
           select_data:[{"name":this.variable_name1,"id":1},{"name":this.variable_name2,"id":2}],
           select_num:1,
           special_data:[{"name":"否","id":0},{"name":"是","id":1}],
           special_num:0
        },
        is_nums:{
          active:1, 
          isactive:0,
          isshow:''
        }
    }
  },
 components:{
    PrizeList
  },
  created(){
      this.list_fun()
      this.limit_fun()
  },
  mounted (){
    
  },
  methods: {
    list_fun(){
        this.post("/draw_lottery/listOfPrize", {
              page:this.page,
	         }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
            //console.log(this.datalist)
          })
    },
    add_but(){
         this.add_mtk = true
    },
    qr_add_but(){
        this.post("/draw_lottery/createPrize", {
                 name:this.add_form.name, 
                 type:this.add_form.select_num,
                 price:this.add_form.price,
                 special:this.add_form.special_num,
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.add_mtk = false
                    this.list_fun()
                    }else {
                    this.open1(res.message,'warning')
                }

        })
    },
    limit_fun(){
        this.post("/draw_lottery/goldAndColorItem", {
	        }).then(res => {
            
            this.is_nums.isshow = parseInt(res.result.silver_egg_consume) 
            //console.log(res.result,"dddd")
         })
    },
    switchchange(){
      this.$confirm('是否开启/关闭, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
                this.post("/draw_lottery/setSilverItem", {
                    consume:this.is_nums.isshow,
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                     this.limit_fun()
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
               this.list_fun()
        });
    },
    goBack() {
        this.$router.go(-1)
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>

[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }
</style>
